<template>
    <div class="book-trip-container">
      <h2>车票预订</h2>
      <p>车次信息: {{ selectedTrip.tripNumber }}</p>
      <div class="form-group">
        <label for="seatType">座位类型</label>
        <select v-model="seatType" id="seatType">
          <option value="普通座">普通座</option>
          <option value="靠窗座">靠窗座</option>
          <option value="过道座">过道座</option>
        </select>
      </div>
      <button @click="createOrder">预订</button>
      <p v-if="errorMessage" class="text-danger">{{ errorMessage }}</p>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        selectedTrip: {},
        seatType: '普通座',
        errorMessage: ''
      };
    },
    created() {
      const tripId = this.$route.query.tripId;
      axios.get(`/api/trips/${tripId}`)
     .then(response => {
          this.selectedTrip = response.data;
        })
     .catch(error => {
          console.log(error);
        });
    },
    methods: {
      createOrder() {
        const orderData = {
          tripId: this.selectedTrip.id,
          seatType: this.seatType
        };
        axios.post('/api/orders', orderData)
       .then(response => {
            // 预订成功后的操作，比如跳转到订单详情页面等
            this.$router.push('/order-detail');
          })
       .catch(error => {
            this.errorMessage = '预订失败，请稍后再试';
          });
      }
    }
  };
  </script>
  
  <style scoped>
  .book-trip-container {
    width: 400px;
    margin: 0 auto;
    padding: 20px;
  }
  </style>